<template>
  <div class="w-full h-full ">
    <div class="w-full h-full">
      <div class="flex justify-center gap-4 mt-2">
        <div class="flex">
          <div class="mt-1">
            iou: {{ iou}}
          </div>
          <div>
            <q-slider  v-model="iou" :min="0.0" :max="1.0" :step="0.01" style="width: 100px" label   switch-label-side />
          </div>
        </div>
        <div class="flex">
          <div class="mt-1">
            置信度: {{ trust}}
          </div>
          <div>

          <q-slider  id="trust"  v-model="trust" :min="0.0" :max="1.0" :step="0.01" style="width: 100px" label    switch-label-side/>
          </div>

<!--          <q-range-->
<!--            style="width: 100px;margin-top: 10px"-->
<!--            v-model="trust"-->
<!--            id="trust"-->
<!--            :min="0"-->
<!--            :max="1"-->
<!--            :step="0.01"-->
<!--            color="primary"-->
<!--            label-->
<!--          />-->
<!--          <input type="text" v-model="trust" placeholder="置信度" id="trust"-->
<!--            class="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-xs !focus:ring-blue-500 !focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">-->
        </div>
      </div>
      <div class=" h-full mt-3 w-11/12 m-auto">
        <img src="" id="main-img" style="height: 200px;margin: auto;width: 300px">
        <div class="flex flex-center text-2xl text-blue-600">
          稻穗计数：{{ count }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import bus from 'src/utils/bus';
import { api, axios } from 'src/boot/axios';
const $q = useQuasar()
const iou = ref(0.45)
const trust = ref(0.25)
api.post('/post_test', {})
const count = ref(null)
bus.on('predict', (pic) => {

  let form = new FormData()
  form.append('file', pic);
  form.append('iou', iou.value);
  form.append('trust', trust.value)

  api({
    url: '/start_predict',
    method: 'post',
    data: form,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (res.data.code === 200) {
      console.log(res.data.data)
      bus.emit('revceive_predict', res.data.data)
      count.value = res.data.data.num
    } else {
      $q.notify({
        message: '预测失败',
        color: 'red',
        position: 'top'
      })
    }
  }).catch(err=>{
    alert(err)
  })
})



</script>
